<template>
  <div>
    <a-modal :width="800" title="添加表" v-model="visible" @ok="save">
      <table class="form">
        <tr>
          <td class="label w100 need">表名称</td>
          <td>
            <a-input v-model.trim="tableName" class="w120 mr10"></a-input>
            <a-button class="mr10" @click="addTreeColumn">添加Tree字段</a-button>
            <a-button class="mr10" @click="addDemoColumn">添加Demo字段</a-button>
            <a-button class="mr10" @click="clearColumns">清空字段</a-button>
          </td>
        </tr>
        <tr>
          <td class="label w100 need">表字段</td>
          <td>
            <table class="table-column">
              <tr v-for="(col,index) in columns" :key="`col${index}`">
                <td><div class="w120"><a-input placeholder="字段名称" v-model.trim="col.name"></a-input></div></td>
                <td>
                  <a-select class="w120" v-model="col.type">
                    <a-select-option v-for="t in columnTypeArr" :key="t.key" :value="t.key">
                      {{ t.value }}
                    </a-select-option>
                  </a-select>
                </td>
                <td>
                  <div class="w160"><a-input placeholder="备注信息" v-model.trim="col.comment"></a-input></div>
                </td>
                <td>
                  <div class="btn-circle" @click="addColumn(col)">
                    <i class="fa fa-plus"></i>
                  </div>
                  <div class="btn-circle" @click="delColumn(col)">
                    <i class="fa fa-trash"></i>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </a-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      columnTypeArr: [
        { key: 'long', value: '长整数' },
        { key: 'int', value: '整数' },
        { key: 'double', value: '浮点数' },
        { key: 'string', value: '字符串' },
        { key: 'boolean', value: '布尔值' },
        { key: 'text', value: '长文本' },
        { key: 'date', value: '日期' },
        { key: 'datetime', value: '日期时间' },
        { key: 'time', value: '时间' }
      ],
      tableName: '',
      columns: [
        { name: 'test', type: 'string', comment: '测试' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    show () {
      this.visible = true
    },
    hide () {
      this.visible = false
    },
    save () {
      const names = []
      if (this.tableName.length === 0) {
        this.$warning({ title: '表名称不能为空' })
        return
      }
      for (let i = 0; i < this.columns.length; i++) {
        const name = this.columns[i].name
        if (names.includes(name)) {
          this.$warning({ title: '第' + (i + 1) + '个字段名称重复' })
          return
        }
        names.push(name)
        if (name.length === 0) {
          this.$warning({ title: '第' + (i + 1) + '个字段名称为空' })
          return
        }
      }
      const data = { tableName: this.tableName, columnVoList: this.columns }
      this.$emit('save', JSON.stringify(data))
    },
    clearColumns () {
      this.columns = [
        { name: 'test', type: 'string', comment: '测试' }
      ]
    },
    addColumn (col) {
      const index = this.columns.indexOf(col)
      this.columns.splice(index + 1, 0, { name: 'test', type: 'string', comment: '测试' })
    },
    delColumn (col) {
      if (this.columns.length === 1) {
        this.$warning({ title: '至少保留一个字段' })
        return
      }
      const index = this.columns.indexOf(col)
      this.columns.splice(index, 1)
    },
    addTreeColumn () {
      const arr = [
        { name: 'name', type: 'string', comment: '名称' },
        { name: 'code', type: 'string', comment: '编码' },
        { name: 'pid', type: 'long', comment: '上级ID' },
        { name: 'layer', type: 'int', comment: '层级' },
        { name: 'sort', type: 'int', comment: '序号' }
      ]
      arr.forEach(t => {
        if (!this.columns.some(x => {
          return x.name === t.name
        })) {
          this.columns.push(t)
        }
      })
    },
    addDemoColumn () {
      const arr = [
        { name: 'name', type: 'string', comment: '名称' },
        { name: 'dept_id', type: 'long', comment: '部门ID' },
        { name: 'num', type: 'int', comment: '序号' },
        { name: 'score', type: 'double', comment: '分数' },
        { name: 'is_open', type: 'boolean', comment: '是否启用' },
        { name: 'describ', type: 'text', comment: '描述' },
        { name: 'sdate', type: 'date', comment: '日期' },
        { name: 'sdatetime', type: 'datetime', comment: '开始时间' },
        { name: 'stime', type: 'time', comment: '时间点' }
      ]
      arr.forEach(t => {
        if (!this.columns.some(x => {
          return x.name === t.name
        })) {
          this.columns.push(t)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .table-column{
    td{
      padding:4px 10px 4px 0;
    }
  }
</style>
